<template>
  <div class="systemMaintenance">
    <div class="system">
      <div class="system_title">系统更新维护</div>
      <el-radio-group v-model="mainObj.maintainStatus">
        <el-radio :label="1">开启</el-radio>
        <el-radio :label="0">关闭</el-radio>
      </el-radio-group>
      <div class="block">
        <el-date-picker
          v-model="maintenanceTime"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </div>
      <div class="system_btn">
        <el-button size="medium" @click="handleMaintenance" type="primary">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     
   maintenanceTime:'',
    
    mainObj :{
        startDate:'',
      endDate:'',
      maintainStatus:'',
    },

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  methods: {

    //提交维护信息
   async handleMaintenance(){ 
    
      
      let {data:res} = await this._API.systemMaintain(this.mainObj) 
    
      if(res.state == 200){
        return this.$message.success('维护信息发布成功')
      }
    },
  },
  watch: {
    maintenanceTime: function(e) {
     // console.log(e);
      if(e){
        this.mainObj.startDate = e[0]
        this.mainObj.endDate = e[1]
      }else {
          this.mainObj.startDate = ''
        this.mainObj.endDate = ''
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.systemMaintenance {
  width: 100%;
  height: 100vh;
  .system {
    .system_title {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #999;
    }
    .block {
      display: inline-block;
      margin-left: 20px;
    }
  }
}
</style>
